<template>
  <div class="header_information page-container">
    <!-- 头部 -->
    <el-row class="header_name">
      <el-col
        :span="24"
        class="header_text"
      >
        <h1>统计与报表</h1>
      </el-col>
      <el-col :span="24">
        <div class="header_line"></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row class="el_row_btn">
      <el-col
        :span="24"
        class="content"
      >
        <div class="content_top_btn">
          <div>
            <el-button
              size="large"
              @click="handleNumber"
            >设置组委会目标人数</el-button>
          </div>

        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <el-row>
      <el-col :span="24">
        <span class="over_text">完成目标 200 人</span>
        <el-divider class="divider" />
        <span class="over_text">当前报名人数(已缴费人数): {{ contValue.payersCount }}</span>
        <el-progress
          :percentage="contValue.payersPercent"
          class="progress"
        />
        <span class="over_text">当前报名人数(已通过审核): {{contValue.passedCount }}</span>
        <el-progress
          :percentage="contValue.passedPercent"
          class="progress"
        />
        <span class="over_text">当前报名人数(已通过待缴费): {{ contValue.studentCount }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script  setup>
import { getStatistics } from '@/api/manage/agentmenu/index.js'
import { onMounted, ref } from "vue";
// 获取userId
const userId = ref('')
const info_data = JSON.parse(localStorage.getItem('info_data'))

userId.value = info_data.userId

// 获取报表数据
const contValue = ref({})
const handleGetStatistics = async () => {
  let res = await getStatistics(userId.value)

  contValue.value = res.entity
}

onMounted(() => {
  handleGetStatistics()
})
</script>

<style lang="scss" scoped>
.header_information {
  padding: 20px;
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }
    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  //   内容
  .el_row_btn {
    margin-bottom: 20px;
    .content {
      .content_top_btn {
        display: flex;
        .top_search_inp {
          width: 300px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
      }
    }
  }
  :deep(.el-table)__cell {
    padding: 12px 0 !important;
  }
  .over_text {
    font-size: 14px;
    line-height: normal;
  }
  :deep(.el-progress__text) {
    span {
      font-size: 14px;
    }
  }
  .divider {
    margin: 7px 0;
  }
  .progress {
    width: 300px;
  }
}
</style>